<template>
  <div class="app-container">
    <el-container>
      <el-aside class="full-height" width="500px">
        <el-tabs v-model="activeName" type="card">
          <div class="tip d-flex">
            <el-select v-model="status" clearable filterable placeholder="状态">
              <el-option
                v-for="(item, index) in statuses"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button
              v-if="activeName === 'second'"
              class="ml12"
              icon="el-icon-plus"
              type="primary"
              @click="handleEdit"
            >
              新增
            </el-button>
          </div>
          <div class="h12"></div>
          <el-tab-pane label="自动计划" name="first">
            <el-table
              :data="autoPlanFilter"
              stripe
              style="width: 100%"
              @row-click="handleDetail"
            >
              <el-table-column align="center" label="日期" prop="date" />
              <el-table-column align="center" label="名称" prop="name" />
              <el-table-column align="center" label="状态" prop="status">
                <template #default="{ row }">
                  <el-tag :type="getStatus(row, 'type')">
                    {{ getStatus(row, 'label') }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" prop="act">
                <template #default="{ row }">
                  <el-button
                    circle
                    icon="el-icon-document-copy"
                    size="mini"
                    title="复制计划"
                    type="success"
                    @click="handleCopy(row)"
                  />
                  <el-button
                    circle
                    icon="el-icon-minus"
                    size="mini"
                    title="取消计划"
                    type="primary"
                    @click="handleCancel(row)"
                  />
                  <el-button
                    circle
                    icon="el-icon-delete"
                    size="mini"
                    title="删除计划"
                    type="danger"
                    @click="handleDelete(row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="手动计划" name="second">
            <el-table
              :data="autoPlanFilter"
              style="width: 100%"
              @row-click="handleDetail"
            >
              <el-table-column align="center" label="日期" prop="date" />
              <el-table-column align="center" label="名称" prop="name" />
              <el-table-column align="center" label="状态" prop="status">
                <template #default="{ row }">
                  <el-tag :type="getStatus(row, 'type')">
                    {{ getStatus(row, 'label') }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" prop="act">
                <template #default="{ row }">
                  <el-button
                    circle
                    icon="el-icon-document"
                    size="mini"
                    title="复制计划"
                    type="success"
                    @click="handleCopy(row)"
                  />
                  <el-button
                    circle
                    icon="el-icon-minus"
                    size="mini"
                    title="取消计划"
                    type="primary"
                    @click="handleCancel(row)"
                  />
                  <el-button
                    circle
                    icon="el-icon-delete"
                    size="mini"
                    title="删除计划"
                    type="danger"
                    @click="handleDelete(row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-aside>
      <el-main
        v-loading="loading"
        class="full-height pt0 pb0"
        style="
          padding-top: 0;
          margin-left: 12px;
          box-shadow: -10px 0 6px -10px rgba(76, 73, 73, 0.3);
        "
      >
        <div class="h24"></div>
        <el-divider content-position="left">
          <span class="font-bold color-primary">计划详情</span>
        </el-divider>
        <el-descriptions
          border
          :column="2"
          content-class-name="contentClass"
          label-class-name="labelClass"
        >
          <el-descriptions-item label="计划名称">
            喷灌20240701
          </el-descriptions-item>
          <el-descriptions-item label="执行时间">
            2024-07-01 14:00:00
          </el-descriptions-item>
          <el-descriptions-item label="行进方向">
            <span class="font-bold color-success font16">正向</span>
          </el-descriptions-item>
          <el-descriptions-item label="执行状态">
            <el-tag type="success">已完成</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="灌溉时长">
            <span class="font-bold color-success font16">5小时24分钟</span>
          </el-descriptions-item>
          <el-descriptions-item label="总水量">
            <span class="font-bold color-success font16">32.4方</span>
          </el-descriptions-item>
        </el-descriptions>
        <div class="h24"></div>
        <el-divider content-position="left">
          <span class="font-bold color-primary">分区执行详情</span>
        </el-divider>
        <el-table :data="cellsFormat" :height="600" style="width: 100%">
          <el-table-column align="center" label="大分区" prop="id" />
          <el-table-column align="center" label="小分区" prop="idx" />
          <el-table-column align="center" label="脉冲周期(s)" prop="p" />
          <el-table-column align="center" label="速率(%)" prop="v" />
          <el-table-column align="center" label="占空比(%)" prop="d" />
          <el-table-column align="center" label="尾枪" prop="endGun">
            <template #default="{ row }">
              <el-tag v-if="row.endGun" type="success">打开</el-tag>
              <el-tag v-else type="danger">关闭</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <edit ref="edit" />
  </div>
</template>

<script>
  import { convertArr2Obj } from '@/utils'
  import { cells } from '@/utils/constant'
  import Edit from './components/Edit'
  export default {
    components: {
      Edit,
    },
    data() {
      return {
        activeName: 'first',
        loading: false,
        status: '',
        form: {},
        statuses: [
          { label: '待执行', value: 0, type: 'info' },
          { label: '执行中', value: 1, type: 'primary' },
          { label: '已完成', value: 2, type: 'success' },
          { label: '已取消', value: -1, type: 'danger' },
        ],
        autoPlan: [
          {
            name: '20240722',
            date: '2023-07-22',
            status: 0,
          },
          {
            name: '20240721',
            date: '2023-07-21',
            status: 1,
          },
          {
            name: '20240701',
            date: '2023-07-01',
            status: 2,
          },
          {
            name: '20240615',
            date: '2023-06-15',
            status: -1,
          },
        ],
      }
    },
    computed: {
      cellsFormat() {
        let res = []
        cells.forEach((item) => {
          const { id, idx, name } = item
          res.push({ id, idx, name, p: 60, v: 100, d: 50, endGun: 1 })
        })
        return res
      },
      autoPlanFilter() {
        if (this.status !== '') {
          return this.autoPlan.filter((val) => {
            return +val.status === this.status
          })
        }
        return this.autoPlan
      },
    },
    methods: {
      getStatus(row, field) {
        const statusObj = convertArr2Obj(this.statuses, 'value')
        return statusObj[row.status][field]
      },
      handleCopy(row) {
        this.form = row
        this.$refs.edit.show(row)
      },
      handleCancel(row) {
        console.log(row)
        this.$baseConfirm('确定取消？', null, async () => {
          this.$baseMessage('操作成功', 'success', 'vab-hey-message-success')
        })
      },
      handleDetail(row) {
        this.loading = true
        setTimeout(() => {
          this.form = row
          this.loading = false
        }, 2000)
      },
      handleDelete(row) {
        console.log(row)
        this.$baseConfirm('确定删除？', null, async () => {
          this.$baseMessage('操作成功', 'success', 'vab-hey-message-success')
        })
      },
      handleEdit(row) {
        this.$refs.edit.show(row)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    height: 720px;
    line-height: 720px;
    text-align: center;
  }
</style>
